{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <h1>{{ heading_title }}</h1>
      <ol class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ol>
    </div>
  </div>
  <div class="container-fluid">

    {% if error_warning %}
      <div class="alert alert-danger alert-dismissible"><i class="fas fa-exclamation-circle"></i> {{ error_warning }} <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
    {% endif %}

    <div class="card">
      <div class="card-header"><i class="fas fa-sync"></i> {{ text_version }}</div>
      <div class="card-body">

        <fieldset>
          <legend id="btn-version"{% if error_warning %} class="text-danger"{% endif %}>{{ text_update }}</legend>
        </fieldset>

        <div class="alert alert-info">
          <p><strong><i class="fas fa-exclamation-circle"></i> {{ text_tips }}</strong></p>
          <ol>
            <li>{{ text_make }}
              <br/>
              {{ text_backup }} <a href="{{ backup }}">{{ text_here }}</a>;
            </li>
            <li>{{ text_check }}</li>
            <li>{{ text_better }}</li>
          </ol>
        </div>
        <br/>

        <fieldset>
          <legend>{{ text_progress }}</legend>

          <div class="row mb-3">
            <label class="col-sm-2 col-form-label">{{ text_progress_short }}</label>
            <div class="col-sm-10">
              <div id="progress-download" class="progress">
                <div id="progress-bar" class="progress-bar"></div>
              </div>
              <br/>

              <button type="button" id="button-upgrade" data-oc-loading-text="{{ text_loading }}" class="btn btn-success"{% if not upgrade %} disabled{% endif %}><i class="fas fa-play"></i> {{ button_start }}</button>
              <div id="progress-text"></div>
            </div>
          </div>

        </fieldset>

      </div>
    </div>

  </div>
</div>

<script type="text/javascript"><!--
$('#button-upgrade').on('click', function() {
    var i = 0;

    $('#progress-bar').css('width', '0%').removeClass('progress-bar-danger progress-bar-success');
    $('#progress-text').html('{{ text_download }}');
    $('#log').append('{{ text_download }}' + "\n");

    var upgrade = function(next) {
        return $.ajax({
            url: next,
            dataType: 'json',
            beforeSend: function() {
                $('#button-upgrade').button('loading');
            },
            complete: function() {
                $('#button-upgrade').button('reset');
            },
            success: function(json) {
                if (json['error']) {
                    $('#progress-bar').addClass('progress-bar-danger');
                    $('#progress-text').html('<div class="text-danger">' + json['error'] + '</div>');
                }

                if (json['redirect']) {
                    location = json['redirect'];
                }

                if (json['text']) {
                    i = i + 1;

                    $('#progress-bar').css('width', (i * 20) + '%');
                    $('#progress-bar').css('width', '20%');

                    $('#progress-text').html(json['text']);
                }

                if (json['next']) {
                    chain.attach(upgrade(json['next']));
                }
            },
            error: function(xhr, ajaxOptions, thrownError) {
                $('#log').append(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
    };

    chain.attach(upgrade('index.php?route=tool/upgrade|download&user_token={{ user_token }}&version={{ version }}'));
});
//--></script>
{{ footer }}